<script>
import { GlTooltipDirective, GlButton } from '@gitlab/ui';
// eslint-disable-next-line no-restricted-imports
import { mapActions, mapState } from 'vuex';
import { VULNERABILITY_MODAL_ID } from 'ee/vue_shared/security_reports/components/constants';
import { BV_SHOW_MODAL } from '~/lib/utils/constants';
import { visitUrl } from '~/lib/utils/url_utility';
import { s__ } from '~/locale';

export const i18n = {
  moreInfo: s__('SecurityReports|More info'),
  createIssue: s__('SecurityReports|Create issue'),
  createJiraIssue: s__('SecurityReports|Create Jira issue'),
  revertDismissVulnerability: s__('SecurityReports|Undo dismiss'),
  dismissVulnerability: s__('SecurityReports|Dismiss vulnerability'),
};

export default {
  i18n,
  name: 'SecurityDashboardActionButtons',
  components: {
    GlButton,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  props: {
    vulnerability: {
      type: Object,
      required: true,
    },
    canCreateIssue: {
      type: Boolean,
      required: false,
      default: false,
    },
    canDismissVulnerability: {
      type: Boolean,
      required: false,
      default: false,
    },
    isDismissed: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  computed: {
    ...mapState('vulnerabilities', ['isCreatingIssue', 'isDismissingVulnerability']),
    isJiraVulnerabilityIssuesEnabled() {
      return Boolean(this?.vulnerability?.create_jira_issue_url);
    },
    createIssueButtonLabel() {
      const { $options } = this;
      return this.isJiraVulnerabilityIssuesEnabled
        ? $options.i18n.createJiraIssue
        : $options.i18n.createIssue;
    },
  },
  methods: {
    ...mapActions('vulnerabilities', [
      'setModalData',
      'createIssue',
      'dismissVulnerability',
      'revertDismissVulnerability',
    ]),
    handleCreateIssue() {
      const { vulnerability } = this;

      if (this.isJiraVulnerabilityIssuesEnabled) {
        this.createJiraIssue(vulnerability);
      } else {
        this.createIssue({ vulnerability, flashError: true });
      }
    },
    createJiraIssue({ create_jira_issue_url }) {
      visitUrl(create_jira_issue_url, true);
    },
    handleDismissVulnerability() {
      const { vulnerability } = this;
      this.dismissVulnerability({ vulnerability, flashError: true });
    },
    handleUndoDismiss() {
      const { vulnerability } = this;
      this.revertDismissVulnerability({ vulnerability, flashError: true });
    },
    openModal(payload) {
      this.setModalData(payload);
      this.$root.$emit(BV_SHOW_MODAL, VULNERABILITY_MODAL_ID);
    },
  },
};
</script>

<template>
  <div>
    <gl-button
      key="more-info"
      v-gl-tooltip
      :aria-label="$options.i18n.moreInfo"
      :title="$options.i18n.moreInfo"
      class="js-more-info"
      variant="default"
      category="tertiary"
      icon="information-o"
      data-testid="more-info"
      :data-qa-finding-name="vulnerability.name"
      @click="openModal({ vulnerability })"
    />
    <gl-button
      v-if="canCreateIssue"
      key="create-issue"
      v-gl-tooltip
      :aria-label="createIssueButtonLabel"
      :loading="isCreatingIssue"
      :title="createIssueButtonLabel"
      class="js-create-issue gl-ml-3"
      variant="default"
      category="tertiary"
      icon="issue-new"
      data-testid="create-issue"
      :data-qa-finding-name="vulnerability.name"
      @click="handleCreateIssue"
    />
    <template v-if="canDismissVulnerability">
      <gl-button
        v-if="isDismissed"
        key="undo-dismiss"
        v-gl-tooltip
        :aria-label="$options.i18n.revertDismissVulnerability"
        :loading="isDismissingVulnerability"
        :title="$options.i18n.revertDismissVulnerability"
        class="js-undo-dismiss gl-ml-3"
        variant="default"
        category="tertiary"
        icon="redo"
        data-testid="undo-dismiss"
        :data-qa-finding-name="vulnerability.name"
        @click="handleUndoDismiss"
      />
      <gl-button
        v-else
        key="dismiss-vulnerability"
        v-gl-tooltip
        :aria-label="$options.i18n.dismissVulnerability"
        :loading="isDismissingVulnerability"
        :title="$options.i18n.dismissVulnerability"
        class="js-dismiss-vulnerability gl-ml-3"
        variant="default"
        category="tertiary"
        icon="cancel"
        data-testid="dismiss-vulnerability"
        :data-qa-finding-name="vulnerability.name"
        @click="handleDismissVulnerability"
      />
    </template>
  </div>
</template>
